<template>
  <div class="j-fs">
    <div class="j-user">
      <div class="j-user-logo">
        <img src="../images/下载.png" alt />
      </div>
      <div class="j-user-login">
        <a href class="j-user-jd">Hi~欢迎逛京东！</a>
        <p class="j-user-jdi">
          <a href class="j-user-jdit">登录</a>
          <span>|</span>
          <a href class="j-user-jdit">注册</a>
        </p>
      </div>
      <div class="j-user-btm">
        <a href class="j-user-btms">新人福利</a>
        <a href class="j-user-btms j-user-btmq">PLUS会员</a>
      </div>
    </div>
    <div class="m">
      <div class="mt">
        <h5>京东快报</h5>
        <a href>更多></a>
      </div>
      <div class="extra">
        <li class="extra-items">
          <a href>
            <span class="mc">最新</span>N95口罩今年你备了么？没有买到的N95口罩的这里看看
          </a>
        </li>
        <li class="extra-items">
          <a href>
            <span class="mc">最新</span>N95口罩今年你备了么？没有买到的N95口罩的这里看看
          </a>
        </li>
        <li class="extra-items">
          <a href>
            <span class="mc">最新</span>N95口罩今年你备了么？没有买到的N95口罩的这里看看
          </a>
        </li>
        <li class="extra-items">
          <a href>
            <span class="mc">最新</span>N95口罩今年你备了么？没有买到的N95口罩的这里看看
          </a>
        </li>
      </div>
    </div>
    <div class="ms">
      <ul class="mm">
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
        <li>
          <a href>
            <img src="../images/693857001bfb3b17.png" alt class="mm-img" />
            <span class="mm-w">众筹</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="stylus" scoped>
.j-fs{
    float: right;
    width: 190px;
    height: 470px;
    background-color: #fff;
}
.j-user{
    position: relative;
    width: 190px;
    height: 102px;
}
.j-user::after{
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 15px;
    right: 15px;
    content: "";
    background: linear-gradient(270deg,white,#eeeeee,#eeeeee,white);
}
.j-user-logo img{
    top: 10px;
    left: 20px;
    position: absolute;
    width: 40px;
    border-radius: 50%;
}
.j-user-login {
    width: 106px;
    height: 38px;
}
.j-user-jd, .j-user-jdi{
    position: absolute;
    font-size: 10px;
}
.j-user-jd{
    left: 70px;
    top: 15px;
}
.j-user-jdi{
    left: 70px;
    top: 32px;
}
.j-user-jdit{
    color: #333;
}
.j-user-btm {
    position: absolute;
    top: 60px;
    left: 10px;
    width: 100%;
    height: 25px;
}
.j-user-btms {
    display: inline-block;
    width: 70px;
    height: 100%;
    border-radius: 13px;
    background-color: #e1251b;
    font-size: 12px;
    text-align: center;
    line-height: 25px;
    margin: 0 5px;
    color: #fff;
    -webkit-transition: background .3s ease, color .3s ease;
    transition: background .3s ease, color .3s ease;
}
.j-user-btms:hover{
    color: #fff;
    background-color: #c81623;
}
.j-user-btmq{
    color: #e5d790;
    background: #363634;
}
.m{
    width: 190px;
    height: 130px;
    display: inline-block;
}
.m::after{
    position: absolute;
    height: 1px;
    bottom: 0;
    left: 15px;
    right: 15px;
    content: "";
    background: linear-gradient(270deg,white,#eeeeee,#eeeeee,white);
}
.mt{
    width: 190px;
    height: 30px;
    position: relative;
}
.mt h5{
    position: absolute;
    font-size: 14px;
    color: #333;
    left: 15px;
    top: 5px;
}
.mt a{
    position: absolute;
    font-size: 12px;
    right: 15px;
    top: 8px;
}
.extra{
    width: 190px;
    height: 88px;
    margin-top: 5px;
}
.extra-items{
    position: relative;
    max-width: 170px;
    height: 17px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}
.extra-items a{
    font-size: 12px;
    position: absolute;
    left: 50px;
}
.mc{
    position: absolute;
    width: 34px;
    height: 17px;
    color: #e1251b;
    background-color: rgba(225,37,27,.08);
    left: -38px;
    text-align: center;
}
.ms{
    width: 190px;
    height: 240px;
}
.mm{
    width: 100%;
    position: relative;
}
.mm li{
    position: relative;
    width: 63px;
    height: 55px;
    float: left;
}
.mm-img{
    position: absolute;
    left: 16px;
    top: 12px;
    width: 28px;
    height: 28px;
    /* display: block; */
    z-index: 5;
}
.mm-w{
    position: absolute;
    left: 17px;
    top: 40px;
    font-size: 12px;
}
</style>